import React from "react";
import { Button, Modal, message } from "antd";
import { PlusCircleOutlined, EditOutlined } from "@ant-design/icons";
import AddMeeting from "./AddMeeting";
import DelMeeting from "./DelMeeting";
import ImportExportExcel from "./ImportExportExcel";
import EnableMeeting from "./EnableMeeting";
import EditTable from "./EditTable";
// import SendMsg from "./SendMsg";

export default class Contorl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // uploadUrl: "",
      // downloadUrl: "",
      loading: false,
      addVisible: false,
      form: "",
      formTitle: "",
      /**表单关闭回调 */
      handleCancel: "",
      leaders: [],
    };
  }
  componentDidMount() {}

  /**开始创建会议 */
  showAddModal = () => {
    this.setState({
      addVisible: true,
      formTitle: "添加事件",
      form: (
        <AddMeeting
          changeDataSource={this.props.changeDataSource}
          getDataSource={this.props.getDataSource}
          onRef={this.onRef.bind(this)}
        />
      ),
      handleCancel: () => {
        this.setState({
          loading: false,
          addVisible: false,
        });
        this.AddMeeting.handleCancel();
      },
    });
  };

  /*开始修改会议 */
  showEditModal = () => {
    const selectedRowKeys = this.props.selectedRowKeys;
    if (selectedRowKeys.length < 1) {
      message.info("请选择要修改的数据");
    } else if (selectedRowKeys.length > 1) {
      message.info("每次只能修改一条数据");
    } else {
      /**开启弹窗 */
      this.setState({
        addVisible: true,
        formTitle: "编辑事件",
        form: (
          <EditTable
            getDataSource={this.props.getDataSource}
            dataSource={this.props.dataSource}
            onRef={this.onRef.bind(this)}
            // record={record}
            // page={current}
            // rows={rows}
            // selectedRowKeys={this.props.selectedRowKeys}
          />
        ),
      });

      /**初始化数据以及弹窗关闭的回调 */
      setTimeout(() => {
        this.props.dataSource.map((row) => {
          if (row.key === selectedRowKeys[0]) {
            /**初始化数据 */
            this.EditTable.initData(row);
          }
          return null;
        });

        this.setState({
          handleCancel: () => {
            this.setState({
              loading: false,
              addVisible: false,
            });
            this.EditTable.handleCancel();
          },
        });
      }, 100);
    }
  };

  // 获取子组件
  onRef(name, ref) {
    switch (name) {
      case "AddMeeting":
        this.AddMeeting = ref;
        break;
      case "EditTable":
        this.EditTable = ref;
        break;
      default:
        break;
    }
  }

  render() {
    const { addVisible, form, formTitle, handleCancel } = this.state;
    const { selectedRowKeys, getDataSource, dataSource } = this.props;

    return (
      <>
        <ImportExportExcel
          // url为上传地址，importSuccessCallback为上传成功后的回调方法
          // templateHref={HOST + "/static/excel/excel_template.xlsx"}
          // url='/api/user_manage'
          getDataSource={getDataSource}
          // uploadUrl={uploadUrl}
          // downloadUrl={downloadUrl}
        />

        <Button type="primary" onClick={this.showEditModal}>
          <EditOutlined />
          修改
        </Button>

        <Button type="primary" onClick={this.showAddModal}>
          <PlusCircleOutlined />
          增加
        </Button>

        <EnableMeeting
          selectedRowKeys={selectedRowKeys}
          getDataSource={getDataSource}
          dataSource={dataSource}
        />
        <DelMeeting
          selectedRowKeys={selectedRowKeys}
          // delDataSource={this.props.delDataSource}
          getDataSource={getDataSource}
        />
        {/* <SendMsg
          selectedRowKeys={selectedRowKeys}
          getDataSource={getDataSource}
        /> */}

        <Modal
          /**对话框属性 */
          visible={addVisible}
          title={formTitle}
          centered
          closable={true}
          onCancel={handleCancel}
          width={1000}
          footer={null}
          className="edit-modal"
        >
          {form}
        </Modal>
      </>
    );
  }
}
